<template>
  <div class="order-wrap">
    <h3>您的产品</h3>
    <div class="order-list-choose">
      <div class="order-list-option">
        选择产品：
        <v-selection :selections="products" @on-change="productChange"></v-selection>
      </div>
      <div class="order-list-option">
        日期：
        <v-date-picker @on-change="getStartDate"></v-date-picker>
      </div>
      <div class="order-list-option">
        关键词：
        <input type="text" v-model.lazy="query" class="order-query" />
      </div>
    </div>
    <div class="order-list-table">
      <table>
        <tr>
          <th v-for="head in tableHeads">{{head.label}}</th>
        </tr>
        <tr v-for="item in tableData">
          <td v-for="head in tableHeads">{{ item[head.key] }}</td>
          <!--<td>{{item.orderId}}</td>
          <td>{{item.product}}</td>
          <td>{{item.version}}</td>
          <td>{{item.period}}</td>
          <td>{{item.date}}</td>
          <td>{{item.buyNum}}</td>
          <td>{{item.amount}}</td>-->
        </tr>
      </table>
      <div class="table-pagenation">
        <v-pagenation :total="total" :pageSize="pageSize" @on-change="pageChange"></v-pagenation>
      </div>
    </div>
  </div>
</template>

<script>
  import VSelection from '@/components/base/selection'
  import VDatePicker from '@/components/base/datepicker'
  import VPagenation from '@/components/base/pagenation'
/*  import axios from 'axios'
  import api from '../api/api'*/

  export default {
    components:{
      VSelection,
      VDatePicker,
      VPagenation
    },
    data(){
      return {
        query:'',
        /*pageSize: 10,
        productId:0,
        startDate: '',
        total:0,
        tableData: [],*/
        products: [
          {
            label: '数据统计',
            value: 0
          },
          {
            label: '数据预测',
            value: 1
          },
          {
            label: '流量分析',
            value: 2
          },
          {
            label: '广告发布',
            value: 3
          }
        ],
        tableHeads: [
          {
            label: '订单号',
            key: 'orderId'
          },
          {
            label: '购买产品',
            key: 'product'
          },
          {
            label: '版本类型',
            key: 'version'
          },
          {
            label: '有效时间',
            key: 'period'
          },
          {
            label: '购买日期',
            key: 'date'
          },
          {
            label: '数量',
            key: 'buyNum'
          },
          {
            label: '总价',
            key: 'amount'
          }
        ]
      }
    },
    computed:{
      tableData(){
        return this.$store.getters.getOrderList
      },
      total(){
        return this.$store.getters.getOrderListParams.total
      },
      pageSize(){
        return this.$store.getters.getOrderListParams.pageSize
      }
    },
    watch:{
      query(val,oldVal){
        //this.getTableData(0)
        this.$store.commit('updateParams',{
          key:'query',
          val:val
        })
        this.$store.commit('updateParams',{
          key:'currentPage',
          val:0
        })
        //console.log(this.$store.getters.getOrderListParams)
        this.$store.dispatch('fetchOrderList')
      }
    },
    methods:{
      productChange(obj){
        //this.productId = obj.value
        //this.getTableData(0)
        this.$store.commit('updateParams',{
          key:'productId',
          val:obj.value
        })
        this.$store.commit('updateParams',{
          key:'currentPage',
          val:0
        })
        //console.log(this.$store.getters.getOrderListParams)
        this.$store.dispatch('fetchOrderList')
      },
      getStartDate(date){
        //this.  = date
        //this.getTableData(0)
        this.$store.commit('updateParams',{
          key:'startDate',
          val:date
        })
        this.$store.commit('updateParams',{
          key:'currentPage',
          val:0
        })
        //console.log(this.$store.getters.getOrderListParams)
        this.$store.dispatch('fetchOrderList')
      },
      pageChange(currentPage){
        //this.getTableData(currentPage)
        this.$store.commit('updateParams',{
          key:'currentPage',
          val:currentPage
        })
        //console.log(this.$store.getters.getOrderListParams)
        this.$store.dispatch('fetchOrderList')
      },
      /*getTableData(cPage){
        let reqParams = {
          query: this.query,
          productId: this.productId,
          startDate: this.startDate,
          currentPage: cPage,
          pageSize: this.pageSize
        }
        axios.post(api.getTableDataURL,reqParams)
          .then((res)=>{
            console.log(res)
            this.total = res.data.total
            this.tableData = res.data.list
          })
          .catch((res)=>{
            console.log(res)
          })
      }*/
    },
    mounted(){
      //this.getTableData(0)
      this.$store.dispatch('fetchOrderList')
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .order-wrap {
    width: 1000px;
    min-height: 800px;
    margin: 20px auto;
    overflow: hidden;
  }
  .order-wrap h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .order-query {
    height: 25px;
    line-height: 25px;
    border: 1px solid #e3e3e3;
    outline: none;
    text-indent: 10px;
  }
  .order-list-option {
    display: inline-block;
    padding-left: 15px;
  }
  .order-list-option:first-child {
    padding-left: 0;
  }
  .order-list-table {
    margin-top: 20px;
  }
  .order-list-table table {
    width: 100%;
    background: #fff;
  }
  .order-list-table td,
  .order-list-table th {
    border: 1px solid #e3e3e3;
    text-align: center;
    padding: 10px 0;
  }
  .order-list-table th {
    background: #4fc08d;
    color: #fff;
    border: 1px solid #4fc08d;
    cursor: pointer;
  }
  .order-list-table th.active {
    background: #35495e;
  }
  .table-pagenation {
    padding: 15px;
    text-align: right;
  }
</style>
